<template>
    <div>
        <ul>
            <li v-for="article of articles" :key="article.id">{{article.title}}</li>
        </ul>
        <router-link :to="{name:'article',query:{id:Math.random()}}">下一页</router-link>
    </div>
</template>

<script>
    const host = `http://127.0.0.1:3005/article`;
    const all = () => {
        return fetch(host).then(r => r.json())
    }
    export default {
        data(){
            return{
                articles:[]
            }
        },
        beforeRouteEnter(to,from,next){
            next(async (vm) => {
                vm.articles = await all()
            });
        },
        async beforeRouteUpdate(to,from){
            this.articles = await all()
        }
    }
</script>

<style lang="scss" scoped>
    a{
    display: inline-block;
    background-color:#1abc9c;
    color: #fff;
    padding:20px;
  }
</style>